<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>提示信息(Msg) - 设计模式库</title>
	<link rel="stylesheet" href="msg.css"/>
	<style>
        /*reset*/
        body,div,table,h1,h2,h3,h4,h5,h6,ul,ol,li,p,dl,dt,dd,th,td,form,fieldset{margin:0;padding:0;}
        table{border-collapse:collapse;}
        pre,code{white-space:pre;font-family:"Courier New",Courier,monospace;}
        li{list-style:none;}
        em{font-style:normal;}
        img,object{border:none;outline:none;}
        a img{vertical-align:top;}
        abbr,article,aside,audio,canvas,datalist,details,figure,footer,header,hgroup,menu,nav,output,progress,section,video{display:block;margin:0;padding:0;}
        /*reset*/
        body{padding:10px;line-height:1.6;font-size:12px;color:#404040;}
	</style>
</head>
<body>
	<h3 class="s-title">CSS</h3>
	<div class="s-section">
		<a href="msg.css">msg.css</a>
	</div>
	
    <h3 class="s-title">Demo</h3>
    <div class="s-section">

        <div class="s-demo">
            <!-- {{{ msg -->
            <div class="msg">
                <div class="msg-default msg-attention">
                    <i class="msg-icon"></i>
                    <h4 class="msg-title">Title:</h4>
                    <div class="msg-content">attention</div>
                </div>
            </div>
            <!-- msg }}} -->
        </div>
        <a class="s-view-code" href="#">显示源码</a>

        <div class="s-demo">
            <!-- {{{ msg -->
            <div class="msg">
                <div class="msg-default msg-ok">
                    <i class="msg-icon"></i>
                    <h4 class="msg-title">Title:</h4>
                    <div class="msg-content">ok</div>
                </div>
            </div>
            <!-- msg }}} -->
        </div>
        <a class="s-view-code" href="#">显示源码</a>

        <div class="s-demo">
            <!-- {{{ msg -->
            <div class="msg">
                <div class="msg-default msg-tips">
                    <i class="msg-icon"></i>
                    <h4 class="msg-title">Title:</h4>
                    <div class="msg-content">tips</div>
                </div>
            </div>
            <!-- msg }}} -->
        </div>
        <a class="s-view-code" href="#">显示源码</a>

        <div class="s-demo">
            <!-- {{{ msg -->
            <div class="msg">
                <div class="msg-default msg-notice">
                    <i class="msg-icon"></i>
                    <h4 class="msg-title">Title:</h4>
                    <div class="msg-content">notice</div>
                </div>
            </div>
            <!-- msg }}} -->
        </div>
        <a class="s-view-code" href="#">显示源码</a>

        <div class="s-demo">
            <!-- {{{ msg -->
            <div class="msg">
                <div class="msg-default msg-question">
                    <i class="msg-icon"></i>
                    <h4 class="msg-title">Title:</h4>
                    <div class="msg-content">question</div>
                </div>
            </div>
            <!-- msg }}} -->
        </div>
        <a class="s-view-code" href="#">显示源码</a>

        <div class="s-demo">
            <!-- {{{ msg -->
            <div class="msg">
                <div class="msg-default msg-error">
                    <i class="msg-icon"></i>
                    <h4 class="msg-title">Title:</h4>
                    <div class="msg-content">error</div>
                </div>
            </div>
            <!-- msg }}} -->
        </div>
        <a class="s-view-code" href="#">显示源码</a>

        <div class="s-demo">
            <!-- {{{ msg -->
            <div class="msg">
                <div class="msg-default msg-stop">
                    <i class="msg-icon"></i>
                    <h4 class="msg-title">Title:</h4>
                    <div class="msg-content">stop</div>
                </div>
            </div>
            <!-- msg }}} -->
        </div>
        <a class="s-view-code" href="#">显示源码</a>

    </div>

    <h3 class="s-title">Remarks</h3>
    <div class="s-section">
        1、如果要模块显示为内联模式，在最外层标签加上class="msg-inline"<br/>
        <div class="s-demo">
            <!-- {{{ msg -->
            <div class="msg msg-inline">
                <div class="msg-default msg-tips">
                    <i class="msg-icon"></i>
                    <h4 class="msg-title">Title:</h4>
                    <div class="msg-content">tips</div>
                </div>
            </div>
            <!-- msg }}} -->
        </div>
        <a class="s-view-code" href="#">显示源码</a>
		
        2、如果要将提示显示为加强模式，在最外层标签加上class="msg-strong"<br/>
        <div class="s-demo">
            <!-- {{{ msg -->
            <div class="msg msg-strong">
                <div class="msg-default msg-tips">
                    <i class="msg-icon"></i>
                    <h4 class="msg-title">Title:</h4>
                    <div class="msg-content">tips</div>
                </div>
            </div>
            <!-- msg }}} -->
        </div>
        <a class="s-view-code" href="#">显示源码</a>

        3、如果要将提示显示为弱化模式，在最外层标签加上class="msg-weak"<br/>
        <div class="s-demo">
            <!-- {{{ msg -->
            <div class="msg msg-weak">
                <div class="msg-default msg-tips">
                    <i class="msg-icon"></i>
                    <h4 class="msg-title">Title:</h4>
                    <div class="msg-content">tips</div>
                </div>
            </div>
            <!-- msg }}} -->
        </div>
        <a class="s-view-code" href="#">显示源码</a>

    </div>
</body>
</html>
